<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对比新旧生命周期</title>
    <!-- 引入新版本的 react -->
    <script src="../js/react_17.0.1/react.development.js"></script>
    <script src="../js/react_17.0.1//react-dom.development.js"></script>
    <script src="../js/react_17.0.1//babel.min.js"></script>
    <style>
        .father {
            width: 800px;
            height: 400px;
            padding: 5%;
            border: 3px blue solid
        }

        .son {
            width: 750px;
            height: 200px;
            padding: 2%;
            border: 2px red solid
        }
    </style>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        // 父组件
        class FatherComponent extends React.Component{
            constructor(){
                console.log('father ---- constructor');
                super()
                this.state = {
                    present: 'Big bro'
                }
            }

            // componentWillMount() 在新生命周期中已改名，不建议继续使用，使用需要加 UNSAFE_ 前缀，如果不加控制台会有警告
            UNSAFE_componentWillMount(){
                console.log('father ---- componentWillMount');
            }

            componentDidMount(){
                console.log('father ---- componentDidMount');
            }

            shouldComponentUpdate(){
                console.log('father ---- shouldComponentUpdate');
                return true
            }

            // componentWillUpdate() 在新生命周期中已改名，不建议继续使用，使用需要加 UNSAFE_ 前缀，如果不加控制台会有警告
            UNSAFE_componentWillUpdate (){
                console.log('father ---- componentWillUpdate');
            }

            componentDidUpdate(){
                console.log('father ---- componentDidUpdate');
            }

            componentWillUnmount(){
                console.log('father ---- componentWillUnmount');
            }

            render(){
                console.log('father ---- render');
                const {present} = this.state
                return (
                    <div className='father'>
                        <h1>这里是父组件，我有一个祖传大宝贝：{present}</h1>
                        <button onClick={this.changePresent}>大宝贝换换吧</button>
                        <SonComponent presentFromFather={present}/>
                        <button onClick={this.removeComponent}>卸载组件</button>
                    </div>
                )
            }

            changePresent = () => {
                const {present} = this.state
                this.setState({
                    present: present === 'Big bro' ? 'Litter girl' : 'Big bro'
                })
            }

            removeComponent = () => {
                ReactDOM.unmountComponentAtNode(document.querySelector('#app'))
            }
        }

        // 子组件
        class SonComponent extends React.Component{
            constructor(){
                console.log('son ---- constructor');
                super()
            }

            // componentWillMount() 在新生命周期中已改名，不建议继续使用，使用需要加 UNSAFE_ 前缀，如果不加控制台会有警告
            UNSAFE_componentWillMount(){
                console.log('son ---- componentWillMount');
            }
            componentDidMount(){
                console.log('son ---- componentDidMount');
            }
            shouldComponentUpdate(){
                console.log('son ---- shouldComponentUpdate');
                return true
            }

            // componentWillUpdate() 在新生命周期中已改名，不建议继续使用，使用需要加 UNSAFE_ 前缀，如果不加控制台会有警告
            UNSAFE_componentWillUpdate(){
                console.log('son ---- componentWillUpdate');
            }
            componentDidUpdate(){
                console.log('son ---- componentDidUpdate');
            }

            // componentWillReceiveProps() 在新生命周期中已改名，不建议继续使用，使用需要加 UNSAFE_ 前缀，如果不加控制台会有警告
            componentWillReceiveProps(){
                console.log('son ---- componentWillReceiveProps');
            }
            componentWillUnmount(){
                console.log('son ---- componentWillUnmount');
            }
            render(){
                console.log('son ---- render');
                return (
                    <div className='son'>
                        <h2>这里是子组件，我从我父组件那儿继承到了一个祖传大宝贝：{this.props.presentFromFather}</h2>
                    </div>
                )
            }
        }

        ReactDOM.render(<FatherComponent/>,document.querySelector('#app'))
    </script>
</body>

</html>